<template>
	<view>
	
			<view class="wrapper">
				<view class="cont">
					<view class="fill_info_line">
						<view class="fill_info_title">现有USDT</view>
						<view class="fill_info_cont clearfix">{{ userinfo.uMoney }}</view>
					</view>
				</view>

				<view class="cont">
					<view class="fill_info_line">
						<view class="fill_info_title">充值余额</view>
						<view class="fill_info_cont clearfix"><input type="number" v-model="dataInfo.money" placeholder="请输入充值余额" /></view>
					</view>
				</view>

			<!-- 	<view class="cont">
					<view class="fill_info_line">
						<view class="fill_info_title">充值方式</view>
						<view class="fill_info_cont clearfix">
							<radio-group class="uni-list" @change="pay_chage">
								<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in payItems" :key="index">
									<radio :id="item.value" style="transform:scale(0.7)" :value="item.value" :checked="item.value == dataInfo.way"></radio>
									<label class="label-2-text" :for="item.value">
										<text>{{ item.name }}</text>
									</label>
								</label>
							</radio-group>
						</view>
					</view>
				</view> -->

				<view class="cont" v-if="dataInfo.way == 2">
					<view class="uni-padding-wrap uni-common-mt" v-for="(item, index) in userinfo.accountsList" :key="index">
						<view class="uni-flex uni-column topmargin" v-if="item.ispic ==1">
							<view class="flex-item">{{ item.type }}(点击图片保存)</view>
							<view><image :src="getimg + item.picurl" @click="savepic(getimg + item.picurl)" class="tui-pro-img" style="height: 60vw;width: 46vw;"></image></view>
						</view>
						
						<view class="uni-flex uni-column topmargin" v-else>
								<view class="flex-item">{{ item.type }}(点击地址复制)</view>
						<view><text  @click="copyTxt(item.accounts)">{{item.accounts}}</text> </view>
						</view>
						
						
					</view>
				</view>

				<view class="cont" v-if="dataInfo.way == 2 && !dataInfo.img">
					<view class="fill_info_line">
						<view class="fill_info_title">上传截图</view>
						<view class="fill_info_cont clearfix"> 
							<view class="photo_sign" @click="upload">
								<image src="../../static/icon/plus.png" v-model="dataInfo.img" mode="" class="photo_icon"></image>
								<view class="photo_text_b">上传图片</view>
								<view class="photo_text_s">仅支持JPG,PNG,JPEG</view>
								<view class="photo_text_s">BMP格式文件</view>
							</view>
						</view>
					</view>
				</view>
				
				
					<view class="cont" v-if="dataInfo.way == 2 && dataInfo.img">
						<image :src="getimg + dataInfo.img"></image>
						
						</view>

				<view class="submit_btn_cont"><button :class="issubmit ? 'nosubmit_btn' : 'submit_btn'" @click="submit" :disabled="issubmit">充值</button></view>
			</view>
	
	</view>
</template>

<script>
import validate from '@/common/ys-validate.js';
import util from '@/common/publicfunction.js';

export default {
	data() {
		return {
			dataInfo: {
				way: 2,
				img : ''
			},
			loadpic :'', //用户上传的图片
			getimg: this.$getimg,
			issubmit: false,
			userinfo: {},

			payItems: [
				{
					name: '在线支付',
					value: '1'
				},
				{
					name: '扫描二维码支付',
					value: '2'
				}
			]
		};
	},

	onLoad() {
		this.getInfo();
	},

	onPullDownRefresh() {
		// 下拉监听事件
		this.getInfo();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},

	computed: {},
	methods: {
		getInfo(e) {
			this.$api.http.post('assistance/moneychange/getRechargeInfo').then(res => {
				if (res.status == 200) {
					this.userinfo = res.data;
				} else {
					this.$api.msg('获取失败');
					return false;
				}
			});
		},
		pay_chage(e) {
			this.dataInfo.way = e.detail.value;
		},
		savepic(pic) {
			this.$api.msg('正在保存');
			util.savepic(pic);
		},

		copyTxt(data) {
			util.copyTxt(data);
		},
		upload: function() {
			var _self = this;
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有 //'original',
				sourceType: ['album'], //从相册选择
				success: function(res) {
					const tempFilePaths = res.tempFilePaths;
					const uploadTask = uni.uploadFile({
						url: _self.getimg + '/index/upload/uploadImgNoData',
						filePath: tempFilePaths[0],
						name: 'img',
						formData: {
							use: 'payimg',
							back: 'idurl'
						},
						success: uploadFileRes => {
							var res = JSON.parse(uploadFileRes.data);

							if (res.status == 200) {
								
								_self.$api.msg('上传成功');
								_self.dataInfo.img = res.data.url;
								//_self.loadpic = _self.getimg + _self.dataInfo.img;
								
							} else _self.$api.msg(res.msg);
						}
					});

					/* uploadTask.onProgressUpdate(function (res) {
	     
	
	     }); */
				},
				error: function(e) {
					console.log(e);
				}
			});
		},

		submit() {
			if (!validate.isNumber(this.dataInfo.money)) {
				this.$api.msg('充值金额输入有误');
				return false;
			}

			if (parseFloat(this.dataInfo.money) <= 0) {
				this.$api.msg('充值金额不能小于等于0');
				return false;
			}

			if (this.dataInfo.way == '') {
				this.$api.msg('请选择支付方式');
				return false;
			}
			
			if (this.dataInfo.msg == '') {
				this.$api.msg('请上传支付截图');
				return false;
			}

			this.issubmit = true; //禁用按钮
			var _self = this;
			this.$api.http.post('assistance/moneychange/rechargeApply', this.dataInfo).then(res => {
				if (res.status == 200) {
					//成功执行
					uni.showToast({
						icon: 'none',
						title: res.msg,
						mask: true,
						success() {
							setTimeout(() => {
								uni.navigateBack();
							}, 1000);
						}
					});
				} else {
					
					_self.issubmit = false; //启用按钮
					uni.showToast({
						icon: 'none',
						title: res.msg,
						mask: true
					});

					return false;
				}
			});
		}
	}
};
</script>

<style lang="scss">
.remind {
	color: #f1c013;
	font-size: 26upx;
}

.clearfix {
	zoom: 1;
	display: block;
}

.noShow {
	display: none;
}

.clearfix:after {
	content: '.';
	visibility: hidden;
	display: block;
	height: 0;
	clear: both;
}




	.wrapper {
		
		background-color: $bg-gap;
		height: 100vh;
		padding: 20upx;
		color: $color-theme;
		.fill_header {
			border-radius: 5upx;
			background-color: $bg-theme;
			padding: 40upx;
			margin-bottom: 20upx;
			.fill_header_title {
				font-size: 26upx;
			}
			.fill_header_cont {
				margin-top: 30upx;
				.photo_img_cont {
					border: 1upx solid hsla(0, 0%, 60%, 0.3);
					width: 120upx;
					height: 120upx;
					padding: 20upx;

					.photo_img {
						width: 80upx;
						height: 80upx;
					}
				}
			}
		}

		.cont {
			border-radius: 5upx;
			background-color: $bg-theme;
			padding: 40upx;

			.fill_info_line {
				margin-top: 30upx;

				.fill_info_title {
					font-size: 26upx;
				}

				.fill_info_cont {
					position: relative;
					border-bottom: 1upx solid hsla(0, 0%, 60%, 0.3);

					.pwdInput {
						font-size: 26upx;
						height: 80upx;
						line-height: 80upx;
						border: none;
						display: block;
						outline: none;
					}

					.pwd_icon {
						width: 85upx;
						height: 85upx;
						-webkit-transform: scale(0.4);
						transform: scale(0.4);
						position: absolute;
						top: 0;
						right: 0;
					}
				}
				.fill_info_another {
					border-bottom: 1upx solid hsla(0, 0%, 60%, 0.3);
					margin-top: 24upx;
					label {
						font-size: 14upx;
					}
				}
				.checkbox_line {
					padding: 0 0px 14px;
					.uni-input {
						text-indent: 0;
						background: $bg-theme;
					}
				}
			}

			.fill_info_line:first-child {
				margin-top: 0;
			}
		}
	}

	.submit_btn_cont {
		margin-top: 20upx;

		.submit_btn {
			border-radius: 5upx;
			color: #fff;
			font-size: 26upx;
			background: linear-gradient(90deg, #4e8cff, #2f79ff);
		}

		.nosubmit_btn {
			border-radius: 5upx;
			color: #ffffff;
			font-size: 26upx;
			background: linear-gradient(90deg, #c6c5c5, #cdced0);
		}
	}

	.topmargin {
		margin-bottom: 10upx;
	}

	.photo_sign {
		background-color: rgba($color: #fafafa, $alpha: 0.1);
		text-align: center;
		width: 240upx;
		height: 240upx;
		color: #dcdcdc;
		.photo_icon {
			width: 60upx;
			height: 60upx;
			margin: 26upx 0 10upx;
		}
		.photo_text_b {
			font-size: 18upx;
		}
		.photo_text_s {
			margin-top: 6upx;
			font-size: 16upx;
		}
		.photo_preview {
			width: 100%;
			height: 100%;
		}
	}
	
	
	.flex-item{
		margin-bottom: 10upx;
		
	}

</style>
